<template>
    <transition name="drop">
        <div class="tooltip" v-show="isShow" @click.stop="hide">
            <i class="icon-ok"></i>
            <span class="text" v-text="text"></span>
        </div>
    </transition>
</template>
<script>
    export default {
        name: 'tooltip',
        props: {
            text: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                isShow: false,
            };
        },
        methods: {
            show() {
                this.isShow = true;
                this.timer && clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.hide();
                }, 1500);
            },
            hide() {
                this.isShow = false;
            },
        },
    };
</script>
<style lang="stylus">
    @import '~styl/var'
    .tooltip
        position fixed
        top 0
        width 100%
        z-index $highest
        background #666
        padding 18px 0
        text-align center
        &.drop-enter-active, &.drop-leave-active
            transition: transform   0.4s
        &.drop-enter, &.drop-leave-to
            transform translate3d(0, -100%, 0);
        font-size 0
            .icon-ok
                font-size 14px
                color #ffcd32
                margin-right 4px
            .text
                font-size 14px
                color #fff
</style>
